<template>
  <div v-if="isShow" class="typed-modal">
    <div class="typed-box">
      <div class="typed-oldFont">{{ incantation }}</div>
      <div
        @input="inputChange"
        ref="incantainerRef"
        contenteditable
        class="typed-font"
      >
        {{ font }}
      </div>
    </div>
  </div>
  <ClickIcon
    class="like"
    :options="defaultOption"
    :height="450"
    :width="720"
    ref="lottie"
  ></ClickIcon>
</template>

<script lang="ts">
import { ref, defineComponent, defineEmit, nextTick, reactive } from "vue";
import ClickIcon from "../lottie/clickIcon.vue";
import animationData from "../../../public/lottie.json";

const defaultOptions = {
  name: "like",
  animationData: animationData,
  autoplay: false,
  loop: false,
};

export default defineComponent({
  components: {
    ClickIcon,
  },
  emits: ["completeOver"],
  setup(props, { emit }) {
    const isShow = ref(true);
    const lottie = ref(null);
    const incantainerRef = ref(null);
    const defaultOption = reactive(defaultOptions);
    const incantation = ref("Happy Mid-autumn Day");
    let font = ref("_");

    nextTick(() => {
      incantainerRef.value.focus();
    });

    function inputChange(e) {
      let text = e.target.innerText.replace("_", "");
      if (!incantation.value.startsWith(text)) {
        e.target.innerText = font.value;
      } else {
        if (incantation.value.length === text.length) {
          emit("completeOver");
          font.value = text;
          isShow.value = false;
          lottie.value.toggle();
        } else {
          font.value = text + "_";
        }
      }
    }

    return {
      font,
      inputChange,
      incantation,
      incantainerRef,
      defaultOption,
      lottie,
      isShow,
    };
  },
});
</script>

<style lang="scss" scoped>
.typed-modal {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background: rgba($color: #000, $alpha: 0.6);
  .typed-box {
    width: 200px;
    height: 10px;
    background: #829ada;
    border-radius: 4px;
    box-shadow: 1px 2px 4px #7992d6;
    color: #fff;
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    display: flex;
    align-items: center;
    .typed-oldFont {
      position: absolute;
      color: rgba(#fff, $alpha: 0.5);
      z-index: -1;
    }
    .typed-font {
      color: #fff;
      &:focus {
        outline: none;
      }
    }
  }
}
.like {
  pointer-events: none;
}
.like >>> iconBox {
  position: absolute;
  left: 0;
  top: 0;
}
</style>
